<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query" style="position: relative">
        <el-col><span>{{$t('scheduleManager.progressList.queryCondition')}}</span></el-col> <!--查询条件-->
      </el-row>
      <popover-set-query >
        <el-form :inline="true" :model="listQuery" style="padding: 0 20px" >
          <el-row style="padding-bottom: 10px">
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('scheduleManager.lead.importMethod')}}</div> <!--匯入-->
                <dict-select v-model="listQuery.importMethod" code="importMethod" :clearable="true" @change="aaa"></dict-select>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('scheduleManager.progressList.projectNo')}}</div> <!--专案编号-->
                <el-select v-model="listQuery.projectNo"  filterable remote reserve-keyword collapse-tags :clearable="true" :placeholder="$t('scheduleManager.progressList.selectProjectNoPlaceholder')" :remote-method="getUserList" :loading="loading" :no-data-text="$t('public.noData')" :loading-text="$t('public.loading')"> <!--请输入专案编号关键词-->
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('scheduleManager.progressList.vendorShortName')}}</div><!--厂商简称-->
                <popover-select selectType="vendor" :placeholder="$t('scheduleManager.worksDetails.vendorPlaceholder')" valueObjName="vendorShortName" v-model="listQuery.vendorName"></popover-select>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('scheduleManager.progressList.realityReceivablesDate')}}</div>
                <el-date-picker v-model="listQuery.realityReceivablesDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="$t('scheduleManager.progressList.selectDatePlaceHolder')"/>
              </div>
            </el-col>


            <el-col :span="4" v-show="showERP">
             <div class="w20">
                <div class="labelName">{{$t('scheduleManager.progressList.ERPPaymentNo')}}</div><!--ERP应付单号-->
                <el-input v-model="listQuery.erpPayableNo" :disabled="targetERP" :placeholder="$t('scheduleManager.progressList.eneterERPPaymentNoPlaceholder')" clearable class="filter-item"></el-input><!--请输入ERP应付单号-->
              </div>
            </el-col>
            
            <el-col :span="4" v-show="showPO">
              <div class="w20">
                <div class="labelName">{{$t('scheduleManager.progressList.vendorPoNO')}}</div><!--厂商PO单号-->
                <el-input v-model="listQuery.vendorPoNo" :disabled="targetPO" :placeholder="$t('scheduleManager.progressList.eneterVendorPoNoPlaceholder')" clearable class="filter-item"></el-input><!--请输入厂商PO单号-->
              </div>
            </el-col>


            <el-col :span="8" style="margin-top: 32px">
              <div class="yt-btn yt-btn-ys" style="margin-right: 12px" @click="handleFilter">{{$t('scheduleManager.progressList.query')}}</div> <!--查询-->
              <div class="yt-btn yt-btn-ys" @click="reset">{{$t('scheduleManager.lead.import')}}</div> <!--/匯入-->
            </el-col>
          </el-row>
        </el-form>
      </popover-set-query>
    </div>

    <div class="data-list" v-loading="loading" :element-loading-text="$t('projectRevenue.dataReport.loading')" element-loading-spinner="el-icon-loading">
      <el-row class="list-content">
        <el-col><span>{{$t('scheduleManager.progressList.workList')}}</span></el-col><!--工务列表-->
      </el-row>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" style="width: 100%;margin-top: 10px" border class="yt-table"  max-height="600">
        <el-table-column  align="center" :label="$t('scheduleManager.progressList.systemNo')"  prop='systemNo' width="150"></el-table-column><!--系統編號-->
        <el-table-column  align="center" :label="$t('scheduleManager.progressList.projectNo')"  prop='projectNo'  width="100"></el-table-column><!--專案编号-->
        <el-table-column  align="center" :label="$t('travelManagement.travelApplication.projectName')"  prop='projectName' width="300"></el-table-column><!--專案名稱-->
        <el-table-column  align="center" :label="$t('scheduleManager.progressList.epcType')"  prop='epcType'></el-table-column><!--工程类别-->
        <el-table-column  align="center" :label="$t('specialApplication.maintenance.country')"  prop='country'></el-table-column><!--區域別-->
        <el-table-column  align="center"  label="PO單號(U)"  prop='poNoU' width="100"></el-table-column><!--PO單號(U)-->
        <el-table-column  align="center"  :label="$t('projectIncome.projectControlOSP.epcContent')"  prop='epcContent' width="300" class-name="pd"/><!--工程內容-->
        <!-- <el-table-column align="center" :label="$t('scheduleManager.progressList.realityReceivablesDate')" prop="realityReceivablesDate" class-name="pd"/>實際收款日 -->
        <el-table-column align="center" :label="$t('scheduleManager.progressList.vendorShortName')" prop="vendorName" class-name="pd"/><!--厂商简称-->
        <el-table-column v-if="showVendorOfferMoney"  align="center" :label="$t('scheduleManager.worksDetails.vendorOfferMoney')" width="100" prop="vendorOfferMoney" class-name="pd"/><!--廠商報價金額-->
        <el-table-column v-if="showVendorPoNo"  align="center" :label="$t('scheduleManager.progressList.vendorPoNO')" width="120" prop="vendorPoNo" class-name="pd"/><!--厂商PO单号-->
        <el-table-column v-if="showErpPayableNo"  align="center" :label="$t('scheduleManager.progressList.ERPPaymentNo')"  width="120" prop="erpPayableNo" class-name="pd"/><!--ERP应付单号-->
      </el-table>
      <!-- <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
    </div>


  </div>
</template>

<script>
  import popoverSelect from '@/components/popover-select/index.vue';
  import popoverSetQuery from '@/components/popover-setQuery/index.vue';
  import { queryList, saveLead } from '@/api/scheduleManager/lead';
  import { queryProject } from '@/api/scheduleManager/worksDetails';
  import customerReq from '@/api/customer';
  import { selectBuDataPermissions, getDeptByBuAndCountry } from '@/api/bu/index';

  import formatter from '@/utils/formatter';
  export default {
    name: 'lead',
    components: {
      popoverSelect,
      popoverSetQuery,
      'dict-select': () => import('@/components/Dict/dictValueSelect'),
      'yt-select': () => import('@/components/Yt-select/index')
    },
    data() {
      return {
        showERP: false,
        showPO: false,
        targetERP: true,
        targetPO: true,
        showVendorOfferMoney:true,
        showVendorPoNo:true,
        showErpPayableNo:true,
        show: true,
        showI: true,
        listMapAll: this.$store.getters.allMapDic,
        format: 'yyyy-MM-dd', // 时间格式
        total: 0,
        subtotal: {},
        epcType: this.$store.getters.allDic.epcType,
        listQuery: {
          importMethod: '',
          projectNo: '', // 专案编号
          vendorName: '', // 廠商簡稱
          realityReceivablesDate: '', // 实际收款日期
          erpPayableNo: '', // ERP應付單號
          vendorPoNo: '' // PO单号
        },
        loading: false,
        options: [],
        formatter,
        // 所有标题
        list: [],  
      };
    },
    computed: {

    },
    watch: {
      
    },
    created() {
    },
    methods: {
      aaa(row) {
        console.info(row)
      
        if(row ==='PO'){
          this.showPO = true;
          this.showERP = false;

          // this.showVendorPoNo = true;
          // this.showVendorOfferMoney = true;
          // this.showErpPayableNo = false;

        }else if(row === 'ERP'){
          this.showERP = true;
          this.showPO = false;

          // this.showVendorPoNo = false;
          // this.showVendorOfferMoney = false;
          // this.showErpPayableNo = true;
        }else{
          this.showPO = false;
          this.showERP = false;

          //  this.showVendorPoNo = true;
          // this.showVendorOfferMoney = true;
          // this.showErpPayableNo = true;
        }

        // if(this.listQuery.importMethod !== '' && this.listQuery.projectNo !== '' && this.listQuery.vendorName !== ''){
        //     this.handleFilter();
        // }
      },
      
      getUserList(query) {
        this.loading = true;
        queryProject({ projectNo: query }).then(res => {
          this.loading = false;
          this.options = res.data.rows.map(item => ({ value: item.id, label: item.projectNo }));
        });
      },

 
      // 查询
      handleFilter() {
 
        if (this.listQuery.importMethod === '' || this.listQuery.importMethod === undefined) {
          this.$message({
            message: '請選擇匯入方式', // 请选择匯入方式
            type: 'error'
          });
          return false;
        }
        if (this.listQuery.projectNo === '' || this.listQuery.projectNo === undefined) {
          this.$message({
            message: this.$t('managementCost.profitSharing.enterProjectNo'), // 請輸入專案編號
            type: 'error'
          });
          return false;
        }

        if (this.listQuery.vendorName === '' || this.listQuery.vendorName === undefined) {
          this.$message({
            message: this.$t('vendor.enterVendorShortName'), // 請輸入廠商簡稱
            type: 'error'
          });
          return false;
        }

         if (this.listQuery.realityReceivablesDate === '' || this.listQuery.realityReceivablesDate === undefined) {
          this.$message({
            message: '請輸入實際收款日', // 請輸入實際收款日
            type: 'error'
          });
          return false;
        }
        this.targetERP =false
        this.targetPO =false


        this.show = false
        const query = this.listQuery
        this.loading = true
        queryList(query).then(res => {
          if (res.status !== 200) {
            this.$notify({
              title: this.$t('scheduleManager.progressList.getFail'),
              message: res.message,
              type: 'warning'
            });
          } else {
            this.list = res.data.total
            // this.total = res.data.total;
            // this.subtotal = res.data.subtotal
             this.loading = false
          }
           
        })

        
      },
      // 导入
      reset() {
         saveLead( ).then(res => {
          
         })
        
        
      },
     
    },
    
  };
</script>
<style scoped lang="scss">

  /deep/ .el-select__input{
    flex-grow: 1 !important;
    width: 138px !important;
    max-width: 138px !important;
  }

  .wid{
    width:110px;
  }

  .el-checkbox{
    min-width: 167px;
  }

  .el-checkbox+ .el-checkbox {
     margin-left: 0;
  }

</style>
